<template>
  <lay-layer v-model="visible" :shade="true" :shadeClose="false" shadeOpacity="0.2" :area="['500px', '500px']" :btn="action">
    <div style="padding: 20px">
      <lay-form :model="addRoleBo" ref="formRef">
        <lay-form-item label="角色名" prop="roleName" required>
          <lay-input v-model="addRoleBo.roleName"></lay-input>
        </lay-form-item>
        <lay-form-item label="角色代码" prop="roleCode" required>
          <lay-input v-model="addRoleBo.roleCode"></lay-input>
        </lay-form-item>
        <lay-form-item label="状态" prop="status" required>
          <lay-radio v-model="addRoleBo.status" name="status" value="on" label="启用"></lay-radio>
          <lay-radio v-model="addRoleBo.status" name="status" value="off" label="禁用"></lay-radio>
        </lay-form-item>
        <lay-form-item label="描述" prop="note">
          <lay-textarea v-model="addRoleBo.note" placeholder="请输入描述" allow-clear></lay-textarea>
        </lay-form-item>
      </lay-form>
    </div>
  </lay-layer>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {addRole} from '@/api/module/role'
import useFxwForm from "@/hooks/useFxwForm";

const {changeVisible,visible,toReset} = useFxwForm()

const formRef = ref();

const emit = defineEmits(['refreshParent'])


const addRoleBo = ref({
  roleName: '',
  roleCode: '',
  status: 'on',
  note:''
})

const action = ref([
  {
    text: "确认",
    callback: () => {
      addRole(addRoleBo.value).then(res=>{
        if (res.code === 200) {
          emit('refreshParent')
          toReset(formRef)
          changeVisible();
        }
      })
    }
  },
  {
    text: "取消",
    callback: () => {
      changeVisible();
    }
  }
])

defineExpose({
  changeVisible
})



</script>

<style scoped>


</style>